<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品增加页面</title>
    <script type="text/javascript" src="asserts/plugins/JQuery/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#button_id").click(function () {
                //实例化表单对象
                var formData = new FormData();
                //传递action 关键字
                formData.append("action", "addProduct")
                //多选框
                formData.append("class_id", $("#class_id").val());
                //文本框
                formData.append("name", $("#name").val());
                formData.append("detail", $("#detail").val());
                formData.append("stock", $("#stock").val());
                formData.append("price", $("#price").val());

                //打印
                console.log($("#class_id").val());
                console.log($("#name").val());
                console.log($("#detail").val());
                console.log($("#stock").val());
                console.log($("#price").val());


                //图片
                formData.append("file", $("#fileContent")[0].files[0])

                //通过ajax发送数据到服务器
                $.ajax({
                    url: "http://localhost:8080/TheMall/UserServlet",
                    async: true,
                    headers: {action: "addProduct"},
                    data: formData,
                    type: "post",
                    dateType: "json",
                    //告诉jQuery 不要去处理 formData
                    processData: false,
                    //指定为 false 才是正确的 Content-Type
                    contentType: false,
                    success: function (respData) {
                        alert("1");
                        if (respData.respType == 'success') {//上架成功
                            alert("上架成功");
                            location.href = "manger.html";
                        } else if (respData.respType == 'error') {//上架失败
                            alert("上架失败");
                        }
                    }
                })
            })
        })

    </script>
</head>
<body>
<form>
    商品类别：<select id="class_id">
    <option value="gudianyue">古典乐</option>
    <option value="tongshuyue">通俗乐</option>
    <option value="mingzuyue">名族乐</option>
</select><br/>
    商品名称:<input type="text" id="name" placeholder="商品名称"><br/>
    商品详情:<input type="text" id="detail" placeholder="商品详情"><br/>
    商品价格:<input type="text" id="price" placeholder="请输入价格"><br/>
    库存数量:<input type="text" id="stock" placeholder="库存数量"><br/>
    图片上传:<input type="file" id="fileContent"><br/>

    <input type="button" value="上架" id="button_id">
</form>
</body>
</html>